<template>
  <div id="accidentListId" class="list">
    <div class="breadcrumb">
      <Breadcrumb separator=">">
				<BreadcrumbItem to="">事故管理</BreadcrumbItem>
				<BreadcrumbItem to="/accident/accidentList">事故清单</BreadcrumbItem>
			</Breadcrumb>
			<div class="btns">
				<ButtonGroup>
          <Button type="text" @click="openNew"><i class="fa fa-plus"></i><span>添加</span></Button>
	        <Button type="text" @click="exportData"><i class="fa fa-download"></i><span>导出数据</span></Button>
	    	</ButtonGroup>
			</div>
		</div>
    <TableSearch :row="2" :open="true">
      <Form :label-width="80">
        <Row :gutter="16">
          <Col :md="8">
            <FormItem label="机构">
              <Select v-model="orgIds" placeholder="请选择" clearable :multiple="true">
                <OrgTreeOption></OrgTreeOption>
              </Select>
            </FormItem>
          </Col>
          <Col :md="8">
            <FormItem label="司机">
              <DriverComplete v-model="searchForm.driverIds" :multiple="true" ref="driverSel"></DriverComplete>
		        </FormItem>
          </Col>
          <Col :md="8">
            <FormItem label="车辆">
              <VehicleComplete v-model="searchForm.vehicleIds"></VehicleComplete>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col :md="8">
            <FormItem label="事故时间">
              <DatePicker v-model="dateRange" type="daterange" placement="bottom-end" placeholder="请选择"></DatePicker>
            </FormItem>
          </Col>
          <Col :md="8">
            <FormItem label="事故类型">
              <Select v-model="searchForm.accidentType" placeholder="请选择" clearable>
                <Option v-for="item in accidentTypeOptions" :value="item.value" :key="`alarm-type-option-${item.value}`">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col :md="8">
            <FormItem label="处理状态">
              <Select v-model="searchForm.process" placeholder="请选择" clearable>
                <Option value="0" key="process-option-0">未处理</Option>
                <Option value="1" key="process-option-1">已处理</Option>
              </Select>
            </FormItem>
          </Col>
          <!-- <Col :md="8">
            <FormItem label="地点">
              <Input v-model="searchForm.address" placeholder="关键字模糊查询" />
            </FormItem>
          </Col> -->
        </Row>
        <Row :gutter="16">
          <Col :md="8">
            <FormItem label="新增时间">
              <DatePicker v-model="instRange" type="daterange" format="yyyy/MM/dd" placement="bottom-end" :options="dateOptions" placeholder="请选择"></DatePicker>
            </FormItem>
          </Col>
        </Row>
      </Form>
			<Button type="primary" class="search-btn" icon="search" @click="search" long>查询</Button>
		</TableSearch>

    <div class="table-content">
			<div class="table">
				<table>
					<thead>
            <th>机构</th>
						<th>事故编号</th>
						<th>事故类型</th>
						<th>发生时间</th>
						<th>新增时间</th>
						<th>事故地点</th>
						<th>事故城市</th>
            <th>损失金额</th>
            <th>司机</th>
            <th>事故车辆</th>
            <th>事故严重性</th>
            <th>处理状态</th>
						<th>操作</th>
					</thead>
					<tbody>
            <tr v-for="(v,i) in pageData.thisPageElements" :key="`AlarmInfo-list-key-${v.id}`">
              <td>{{v.orgName}}</td>
							<td>{{v.accidentNo}}</td>
							<td>{{v.accidentTypeStr}}</td>
							<td>{{v.incidentTimeStr}}</td>
              <td>{{moment(v.insertTime).format('YYYY-MM-DD')}}</td>
							<td>{{v.incidentAddress}}</td>
							<td>{{v.incidentCity}}</td>
              <td>{{v.lossMoneyStr}}</td>
              <td>{{v.driverName}}</td>
              <td>{{v.plateNumber}}</td>
              <td>{{v.accidentLevelStr}}</td>
              <td>{{v.isProcessStr}}</td>
							<td class="operate">
								<a @click="openView(v.id)">查看</a>
                <a @click="openEdit(v.id)">修改</a>
                <!-- <a @click="doDelete(v)">删除</a> -->
							</td>
						</tr>
            <tr v-if="!isLoading && pageData.totalNumberOfElements <= 0">
              <td colspan="12">暂无数据</td>
            </tr>
					</tbody>
				</table>
			</div>

			<Page :total="pageData.totalNumberOfElements" :page-size="pageData.pageSize" :current="current" @on-change="loadPage" show-total></Page>
			<Spin size="large" fix v-if="isLoading"></Spin>
		</div>

    <AccidentModal :modal="modal" :modalTitle="modalTitle" :modalType="modalType" :closeModal="closeModal" @edit="onEdit" @add="onAdd"></AccidentModal>
  </div>
</template>

<script>
  import {mapState,mapActions} from 'vuex'
  import moment                from 'moment'
  import {download}  					 from '@/util/request'
  import AccidentModal         from './AccidentModal'

  const MFT = 'YYYY-MM-DD';
  export default {
    components:{
      AccidentModal
    },
    data(){
      return {
        accidentTypeOptions: [
          {value: '1',label: '双车剐蹭'},
          {value: '2',label: '部件失效'},
          {value: '3',label: '追尾碰撞'},
          {value: '4',label: '车辆颠覆'}
        ],

        orgIds:[],
        dateRange: [],
        instRange:[],
        searchForm:{
          driverIds:[],
          vehicleIds:[],
          accidentType:'',
          process:'',
          address:'',
          sTime:'',
          eTime:''
        },
        submitForm:{},
        current:1,
        modal:false,
				modalTitle:'',
				modalType:false,// 1：新增，0：查看，2：编辑

        dateOptions:{
          disabledDate:(d) => {
            let today = moment(moment().format(MFT)).toDate();
            return d > today;
          }
        }
      };
    },
    watch: {
      dateRange([sTime,eTime]) {
        this.searchForm.sTime = sTime ? moment(sTime).format('YYYY-MM-DD') : '';
        this.searchForm.eTime = eTime ? moment(eTime).format('YYYY-MM-DD') : '';
      }
    },
    computed:{
      ...mapState('accident/accidentList',['isLoading','pageData','isModalLoading'])
    },
    methods:{
      moment,
      ...mapActions('accident/accidentList',['reload','deleteAccident','loadView']),
      search(){
        let [insertStime,insertEtime] = [...this.instRange];
        this.submitForm = {...this.searchForm};
        this.submitForm.orgIds = this.orgIds.join(',');
        this.submitForm.driverIds = this.searchForm.driverIds.join(',');
        this.submitForm.vehicleIds = this.searchForm.vehicleIds.join(',');
        this.submitForm.insertStime = insertStime ? moment(insertStime).format('YYYY-MM-DD') : '';
        this.submitForm.insertEtime = insertEtime ? moment(insertEtime).format('YYYY-MM-DD') : '';
        this.loadPage(1);
			},
      loadPage(n){
				this.current = n;
				this.reload({
					pageNum:this.current,
					...this.submitForm
				});
			},
      exportData(){
        download('/base/accident/export',this.submitForm);
      },
      openNew(){
				this.modalTitle = '添加事故';
				this.modalType = 1;
				this.modal = true;
			},
			openView(id){
				this.modalTitle = '查看事故';
				this.modalType = 0;
				this.modal = true;
				this.loadView(id);
			},
			openEdit(id){
				this.modalTitle = '编辑事故';
				this.modalType = 2;
				this.modal = true;
				this.loadView(id);
			},
      closeModal(){
				this.modal = false;
			},
      onEdit(){
				this.loadPage(this.current);
			},
			onAdd(){
				this.loadPage(1);
			},
      deleteLoadPage(){
				let total = this.pageData.totalNumberOfElements - 1;
				let pageSize = parseInt(total / this.pageData.pageSize) + (total % this.pageData.pageSize > 0 ? 1 : 0);
				if (this.current > 1 && this.current > pageSize) {
					this.current--;
				}
				this.loadPage(this.current);
			},
      doDelete(v){
        this.$Modal.confirm({
          title: '删除事故',
          content: '是否删除该事故？',
          loading: true,
          onOk:async ()=>{
            let res = await this.deleteAccident(v.id);
            if(res.data.success){
              this.$Modal.remove();
              this.deleteLoadPage();
              this.$Message.success('删除成功');
            }else{
              this.$Modal.remove();
              this.$Message.error(res.data.msg);
            }
          }
        });
      }
    },
    mounted(){
      let query = this.$route.query;
      this.dateRange = [query.sTime,query.eTime];
      if (query.accidentType) this.searchForm.accidentType = query.accidentType.toString();
      if (query.process) this.searchForm.process = query.process;
      if (query.driverId){
        this.searchForm.driverIds = [query.driverId];
        this.$refs.driverSel.setOptions({value:query.driverId,label:query.driverName});
      }
      if (query.orgIds){
        this.orgIds = query.orgIds.split(',');
      }
      if (query.insertStime && query.insertEtime) {
        this.instRange = [query.insertStime,query.insertEtime];
      }
      this.search();
    }
  }
</script>
